<template>
  
    <!-- <a-button @click="openModal">专题-{{ title }}</a-button> -->
<a-tag color="#108ee9" style="cursor:pointer" @click="openModal">
    
    <TagsOutlined />
    
    {{ title }}</a-tag>
    <a-modal
      :width="'100%'"
      style="height: 100%; top: 8px"
      v-model:open="open"
      :destoryOnClose="true"
      :title="title"
      @ok="closeModal"
    >
      <div style="background: #cce5ff; padding: 8px; border-radius: 8px">
        <h1>专题-{{ title }}</h1>
        <component :is="currentComponent"></component>
      </div>
    </a-modal>

</template>
<script setup>
import pmpHooks from "@/hooks/PmpHooks.js";
import { ref, onMounted, markRaw, watch } from "vue";
import PmpItemName from "@/components/PmpItemName.vue";
import {TagsOutlined } from '@ant-design/icons-vue';
const title = ref("");
const props = defineProps({
  c: {
    type: String,
    default: "",
  },
});
const currentComponent = ref();
const componentId = ref("");
function changeItem(value) {
  if (value) {
    if (pmpHooks.topicMap[value]) {
      currentComponent.value = markRaw(pmpHooks.topicMap[value].c);
      componentId.value = value;
      title.value = pmpHooks.topicMap[value].title;
    }
  }
}
watch(() => props.c, changeItem);

onMounted(() => {
  changeItem(props.c);
});

const open = ref(false);
function closeModal() {
  open.value = false;
}

function openModal() {
  // console.log('=====', props.id)

  // console.log('=====', data.value)
  open.value = true;
}
</script>
<style scoped></style>
